import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import qfSubMenu from 'qf-sub-menu' //引入侧边栏组件

// 引入图标库
import '@/assets/font/iconfont'
// 引入公共样式
import '@/assets/css/common.css'
// 引入修改 elementUi 样式
import '@/assets/css/el-reset.css'

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条css文件
import 'nprogress/nprogress.css'

//使用Vue.use()将组件注入到所有的子组件
Vue.use(qfSubMenu)

// 路由守卫  全局路由前置钩子函数
router.beforeEach((to, from, next) => {
  // console.log('to===>', to)
  // console.log('from===>', from)
  // 打开进度条
  nprogress.start()
  // 1. 判断本地存储中是否有 token, 如果有就放行, 如果没有就让他重新跳转到登入页
  let token = localStorage.getItem('yue-token')
  if (token) {
    if (store.state.userMenu.length === 0) {
      // 说明用户的路由信息(菜单信息)没有了, 需要重新发起请求
      // 调用store中请求用户菜单数据方法 replace: true 不产生历史记录
      store.dispatch('FETCH_MENULIST').then(() => {
        // 重新激活动态添加的路由
        next({ ...to, replace: true })
      })
    } else {
      next()
    }
  } else {
    // 2. 代表用户没有登入, 不能访问登入页面以外的其他页面

    // 如果用户访问的路径是 login, 那么需要放心
    if (to.path === '/login') {
      next()
    } else {
      // 如果不是login就拦截, 并且跳转到login页
      next({ path: '/login' })
    }
  }
  // console.log('to===>', to)
  // console.log('from===>', from)
  // console.log('next===>', next)
  // next()
})

// 自定义鉴权指令
Vue.directive('has', {
  inserted(el, binding) {
    // console.log(el)
    // console.log(binding)
    // 从本地取出用户的按钮权限
    let buttons = JSON.parse(localStorage.getItem('yue-buttons')) || []
    // console.log(buttons)

    // 判断包不包含权限
    if (!buttons.includes(binding.value)) {
      // 先保存原始按钮的类名
      let ELclassName = el.className
      // 禁用样式
      el.className = ELclassName + ' ' + 'is-disabled'
      // 真正的禁用按钮
      el.disabled = true
    }
  }
})

// 全局路由后置钩子函数 router.afterEach 中停止进度条
router.afterEach((to, from, next) => {
  // console.log('to===>', to)
  // console.log('from===>', from)
  // 深拷贝  浅拷贝  lodash=>deepClone() JSON.stringify() JSON.parse()
  // 设置面包屑数据
  let matched = [...to.matched] // 浅拷贝到一个新的数组 splice会改变数组
  matched.splice(0, 1)
  // console.log(matched)
  // 调用commit 触发 mutation 更改vuex 中存储的 breadCrumb
  store.commit('SET_BREADCRUMB', matched)

  // 停止进度条
  nprogress.done()
})

// 挂载 ElementUI
Vue.use(ElementUI)
// Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
